<style>
  /** 控制css canvas展示的css **/
  .showcanvas_index_true {
    z-index: 100;
  }

  .showcanvas_index_false {
    z-index: -100;
  }

  .rectangle {
    width: 50px;
    height: 15px;
    background: red;


  }

  .tworectangle {
    width: 125px;
    height: 15px;
    background: red;
  }



  .rectanglek {
    width: 25px;
    height: 15px;

  }

  .my_ta {
    display: inline-block;
    font-size: 0;

  }

  .big {
    width: 550px;
    height: 550px;
    /* background-color: black; */
    border-radius: 50%;
    margin: 0 auto;
    z-index: -1;
  }

  .div2 {
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }

  .div3 {
    /* background-image: url(https://files.catbox.moe/dhhe2r.jpg); */
    /* background-color: rgb(235, 235, 235); */
    border-radius: 50%;
    margin: 0px 0px 0px 0px;
    border: 0;
    padding: 0;
    width: 60px;
    height: 60px;
  }

  #myCanvas {
    /* background-color: bisque; */
    margin: 0 auto;
    position: absolute;
    top: 130px;
    width: 100%;
  }

  ._ngcontent-ryv-c16 {
    margin: 0 auto;
  }

  .xuanzhong {
    -webkit-user-select: none;
    /* 禁止 DIV 中的文本被鼠标选中 */
    -moz-user-select: none;
    /* 禁止 DIV 中的文本被鼠标选中 */
    -ms-user-select: none;
    /* 禁止 DIV 中的文本被鼠标选中 */
    user-select: none;
    /* 禁止 DIV 中的文本被鼠标选中 */
  }

</style>

<mat-toolbar style="box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);  -webkit-user-select: none;  /* 禁止 DIV 中的文本被鼠标选中 */
  -moz-user-select: none;     
  -ms-user-select: none;     
  user-select: none;" color="primary">
  <mat-toolbar-row>
    <span>大衍筮法</span>
    <button mat-button>
      重新开始
    </button>
  </mat-toolbar-row>

</mat-toolbar>


<br>
<div class="xuanzhong" style="color: dimgray; position: relative; left: 20px; width: 560px;  margin: 0 auto; width: 452px;  font-size: 23px;  line-height: 22px; font-weight: normal; height:
  22px;line-height:30px;">
  <span style="color: deeppink; ">提示：</span>{{remind}}</div>

<!-- <div style="margin: 0 auto; position: absolute; width:650px;margin:0 auto;left:0;right:0;
  height:650px;
  border:2px solid #000;
  border-radius:50%;
  box-shadow:0px 0px 20px red;"></div> -->
<!-- <p >第一步</p> -->

<mat-grid-list *ngIf="isButtonTwoShow" cols="2" rowHeight="500px">
  <mat-grid-tile>
    <div style="margin-left: 150px;" class="xuanzhong">
      <button mat-fab color="primary" [disabled]="true" *ngFor="let item of rightChopsticks;let i = index" class="div3"
        src="https://files.catbox.moe/dhhe2r.jpg"><span></span></button>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>
    <div style="margin-right: 150px;" class="xuanzhong">
      <button mat-fab color="primary" [disabled]="leftChopsticksButton"
        *ngFor="let item of leftChopsticks;let i = index" [@flyInOut] class="div3" (click)="removeleftOneOrjisuan(i)"
        src="https://files.catbox.moe/dhhe2r.jpg"><span></span></button>
    </div>
  </mat-grid-tile>

</mat-grid-list>

<!-- <div *ngIf="false" class="big xuanzhong" id="div1"> -->
<div *ngIf="isButtonOneShow;" class="big xuanzhong" id="div1">
  <div style="height: 60px;"></div>
  <button mat-fab color="primary" [disabled]="isButtonOne" *ngFor="let item of kuaizi;let i = index" class="div3"
    [@flyInOut] (click)="removeOne(i)"><span></span>
  </button>
</div>



<!-- 最后得到的结果 -->
<div *ngIf="Isresult" class="big" style="margin-top: 50px;">
  <!-- <div *ngIf="true" class="big" style="margin-top: 50px;" > -->
  <div *ngIf="isin_the_end">
    <!-- <div *ngIf="true"> -->
    <!-- <p>得出结果</p> -->
    <div *ngFor="let item of in_the_end_result; let i = index" style="text-align: center;">
      <div *ngIf="item">
        <div class="rectangle my_ta"></div>
        <div class="rectanglek my_ta"></div>
        <div class="rectangle my_ta"></div>
      </div>
      <div *ngIf="!item">
        <div class="tworectangle my_ta"></div>
      </div>
    </div>
  </div>
  <p style="white-space: pre-line;">第{{dozens_of}}卦 {{yijiangwen}}</p>
</div>


<!-- <p>第{{ _number }}变</p>
{{ in_the_end_result }}
<div *ngIf="isin_the_end">{{ in_the_end }}</div>
<div *ngIf="isin_the_end">
  <li>
    {{ in_the_end_result }}
  </li>
</div> -->

<canvas [ngClass]="showcanvas_index" id="myCanvas" height="500"></canvas>

<!-- <div [@flyInOut]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div> -->
<router-outlet></router-outlet>
